<template>
  <div class="content">
    <div class="addr-info" v-for="(item, index) in addressList" :key="index">
      <div class="user-info"><span class="username">{{item.real_name}}</span><span style="font-weight: bold;">{{item.tel}}</span></div>
      <div class="addr-text"><span class="default" v-if="item.defaultCol == 1">默认</span>{{item.area_name}} {{item.address}} </div>
      <div class="operation">
        <img src="../../../static/images/address/edit.png" alt="">
        <span @click="editAddress(item)">编辑</span>
        <img src="../../../static/images/address/delete.png" alt="">
        <span @click="deleteAddress(item, index)">删除</span>
      </div>
    </div>
    <div class="none" v-if="addressList.length <= 0">
      <img src="../../../static/images/address/none.png" alt="">
    </div>
    <div class="add" @click="navToAddAddress">手动添加</div>

    <MDialog v-if="showConfirm" :msg="dialogMsg" @confirm="confirm" @cancel="cancel"></MDialog>
    <MPrompt :msg="promptMsg" @confirm="promptConfirm" v-if="showPrompt"></MPrompt>
  </div>
</template>

<script>
import MDialog from '../../components/MDialog.vue'
import MPrompt from '../../components/MPrompt.vue'
export default {
  data () {
    return {
      addressList: [],
      showConfirm: false,
      showPrompt: false,
      dialogMsg: '',
      promptMsg: '',
      openid: ''
    }
  },

  components: {
    MDialog,
    MPrompt
  },

  onShow () {
    this.openid = wx.getStorageSync('openid')
    this.getAddress()
  },

  methods: {

    /**
     * 查询地址列表
     */
    getAddress () {
      this.$http.get('/api/v1/address/info?openid=' + this.openid).then(res => {
        console.log('地址查询结果', res)
        if (res.data.code === '0') {
          this.addressList = res.data.data.addressList
          if (this.addressList.length > 0) {
            wx.setStorageSync('haveAddress', true)
          } else {
            wx.setStorageSync('haveAddress', false)
          }
        } else {
          console.log('地址查询失败')
        }
      })
    },

    /**
     * 编辑地址，跳转到编辑页面并回显
     */
    editAddress (item) {
      console.log('==========>', item)
      wx.navigateTo({
        url: '../addAddress/main?flag=' + true + '&id=' + item.id + '&realName=' + item.real_name + '&linkNum=' + item.tel + '&region=' + item.area_name + '&areaDesc=' + item.address + '&isDefault=' + item.defaultCol
      })
    },
    deleteAddress (item, index) {
      this.dialogMsg = '确定删除地址？'
      this.showConfirm = true
      this.deleteAddrTemp = item
    },
    confirm (flag) {
      console.log('确定弹窗', flag)
      this.showConfirm = false

      this.$http.post('/api/v1/address/del', {
        body: {
          openid: this.openid,
          id: this.deleteAddrTemp.id
        }
      }).then(res => {
        if (res.data.code === '0') {
          this.promptMsg = '删除地址成功！'
        } else {
          this.promptMsg = '删除地址失败！'
        }
        this.showPrompt = true
        this.getAddress()
      })
    },
    cancel (flag) {
      console.log('取消弹窗', flag)
      this.showConfirm = false
    },

    promptConfirm () {
      this.showPrompt = false
    },

    navToAddAddress () {
      if (this.addressList.length > 0) {
        this.promptMsg = '已存在地址，请勿重复添加！'
        this.showPrompt = true
        return
      }
      wx.navigateTo({
        url: '../addAddress/main'
      })
    }
  }
}
</script>

<style scoped>
.user-info {
  padding: 30rpx 30rpx 0 30rpx;
}
.username {
  font-size: 34rpx;
  margin-right: 20rpx;
  font-weight: bold;
}
.addr-text {
  padding: 0 30rpx 30rpx 30rpx;
  margin-top: 13rpx;
  border-bottom: 1rpx solid #f5f2ed;
}

.addr-text .default {
  background: #e33a44;
  font: 24rpx;
  color: #fff;
  border-radius: 5rpx;
  margin-right: 20rpx;
  padding: 3rpx 10rpx;
}

.operation {
  text-align: right;
  color: #8a857c;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  vertical-align: middle;
  height: 90rpx;
  padding-right: 30rpx;
}

.operation img {
  margin-left: 50rpx;
  margin-right: 10rpx;
  height: 28rpx;
  width: 28rpx;
}

.content {
  padding-top: 20rpx;
  font-size: 30rpx;
}
.addr-info {
  background: #fff;
  margin-top: 20rpx;
}
.add {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #e33a44;
  width: 100%;
  text-align: center;
  color: #fff;
  height: 100rpx;
  line-height: 100rpx;
  font-size: 38rpx;
}

.none {
  text-align: center;
  margin-top: 240rpx;
}
.none img {
  height: 170rpx;
  width: 533rpx;
}
</style>

<style>
page {
  background: #f8f8f8;
}
</style>

